<template>
  <div class="login">
    <!-- 页头 -->
    <l-header title="商城"></l-header>
      <cube-form
      :model="model"
      :schema="schema"
      @submit="handleLogin"
      @validate="handleValidate"
      ></cube-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        model: { //数据模型
          username: '',
          password: ''
        },
        schema: { //表单解构模型
          fields: [
            {
              type: 'input',
              modelKey: 'username',
              label: '用户名',
              props: {
                placeholder: '请输入用户名'
              },
              rules: {//校验规则
                required: true
              },
              trigger: 'blur',
              message: {
                required: '用户名为必填项'
              }
            },
            {
              type: 'input',
              modelKey: 'password',
              label: '密码',
              props: {
                placeholder: '请输入密码',
                type: 'password',
                eye: { //密码小眼睛
                  open: false
                }
              },
              rules: {//校验规则
                required: true
              },
              trigger: 'blur',
              message: {
                required: '密码为必填项'
              }
            },
            { // 登陆按钮
              type: 'submit',
              label: '登陆'
            }
          ]
        }
      }
    },
    methods: {
      async handleLogin(e){
        e.preventDefault();
        console.log('登陆');
        //收到服务器的响应对象后
        //get请求 用的查询参数
        // const res = await this.$http.get('/api/login', {params: {
        //   username: this.model.username,
        //   password: this.model.password
        // }})

        //post请求，在请求体body中
        //传参的方式如下，request.body,所有参数都放入请求体中
        //好处：没有体积长度的限制，对密码等敏感数据不至于直接暴露出来
        //axios是 post出一个json数据
        //content-type:application/json
        const res = await this.$http.post('/api/login', {
          username: this.model.username,
          password: this.model.password
        })

        //进行结构
        //响应的状态吗 令牌 错误信息等
        console.log('res',res);
        
        const {code, token, message} = res.data;

        if(code==0) {
          //登陆成功
          localStorage.setItem('token',token); //缓存到本地
          this.$store.commit('setToken',token); //存入store

          //登陆成功，回跳
          //有查询参数 或 直接去登录页时，跳转到首页
          const redirect =  this.$route.query.redirect || '/';

          this.$router.push(redirect)
          
        } else {
          //登陆失败
          //使用cube-ui提供的全局API,弹出框消息提示
          //只需要配置 toast信息
          const toast = this.$createToast({
            time: 2000,
            txt: message || '登陆失败',
            type: 'error'
          });
          toast.show();
        }
      },
      handleValidate(ret){
        console.log('校验'+ ret);
        
      }
    }
  }
</script>

<style lang="scss" scoped>
.login {
  background: #fff;
}
</style>